<template>
  <div id="aside">
    <b-container class="py-5">
      <!-- 搜索框 -->
      <b-row class="py-3 px-4" id="Search" name="Search">
        <Search />
      </b-row>

      <!-- 近期文章列表 -->
      <b-row class="py-3">
        <ListGroup :items="recent" />
      </b-row>

      <!-- 归档列表 -->
      <b-row class="py-3">
        <ListGroup :items="archive" />
      </b-row>

      <!-- 分类列表 -->
      <b-row class="py-3">
        <ListGroup :items="category" />
      </b-row>
    </b-container>
  </div>
</template>

<script>
import Search from "./Search.vue";
import ListGroup from "./ListGroup.vue";
export default {
  name: "Aside",
  components: {
    Search,
    ListGroup,
  },
  data() {
    return {
      // 近期文章数据
      recent: {
        listTitle: "近期文章",
        content: [],
      },

      // 归档数据
      archive: {
        listTitle: "归档",
        content: [],
      },

      // 分类数据
      category: {
        listTitle: "分类",
        content: [],
      },
    };
  },
  methods: {
    toLocal() {
      //查找存储的锚点id
      let Id = localStorage.getItem("toId");
      let toElement = document.getElementById(Id);
      //锚点存在跳转
      if (Id) {
        toElement.scrollIntoView();
      }
    },
    // 获取最新文章数据
    getRecentData() {
      this.$http.get("/blog/recent").then(
        (res) => {
          const { meta, data } = res.data;
          if (meta.code != 200) return console.log(meta.msg);
          this.recent.content = data.items;
        },
        (error) => {
          console.log(error);
        }
      );
    },

    // 获取日期归档统计数据
    getArchiveData() {
      this.$http.get("/blog/archive_by_date").then((res) => {
        const { meta, data } = res.data;
        if (meta.code != 200) return console.log(meta.msg);
        this.archive.content = data.items;
      });
    },

    // 获取分类归档统计数据
    getTypeData() {
      this.$http.get("/blog/archive_by_category/").then((res) => {
        const { meta, data } = res.data;
        if (meta.code != 200) return console.log(meta.msg);
        this.category.content = data.items;
      });
    },
  },

  mounted() {
    let _this = this;
    this.getRecentData();
    this.getArchiveData();
    this.getTypeData();

    _this.$nextTick(function () {
      window.addEventListener("scroll", _this.handleScroll);
    });
  },
  created() {
    this.$nextTick(() => {
      this.toLocal();
    });
  },
  //用完后记得将存储的锚点置空，否则会影响其他页面跳转到当前页面
  destroyed() {
    localStorage.setItem("toId", "");
  },
};
</script>

<style lang="less" scoped>
#aside {
  min-height: 1200px;
}
</style>
